<!DOCTYPE html>
<!--suppress ALL-->
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <base th:href="@{/}"><!-- 不用base就使用th:src="@{/js/jquery.min.js} -->
    <meta charset="UTF-8">
    <title>用户信息页面</title>
    <link rel="stylesheet" href="/css/bootstrap.min.css"/>
    <script src="/js/jquery.min.js"></script>
    <script src="/js/bootstrap.js"></script>
    <script type="text/javascript" th:inline="javascript">

    </script>
    <style>

        body {
            background-image: url("http://localhost:8088/images/201910280135559860.jpg");
        }

        #user {
            margin-left: 30%;
        }

        #l1, #l2, h2 {
            color: white;

        }

    </style>
<body>
<div class="container">
    <div class="" style="width:100%; height: 70px;padding-top: 10px;">
        <h2 style="text-align: center">用户信息</h2>
    </div>
    <br><br>
    <div id="user">
        <form name="myform" id="myfrom" method="post" class="form-horizontal" role="form">
            <div class="form-group has-success">
                <label class="col-sm-2 col-md-2 control-label" id="l1">邮箱</label>
                <div class="col-sm-4 col-md-4">
                    <input type="text" id="email" th:value="${session.loginUser.getEmail()}" class="form-control"
                           readonly="readonly" name="email"/>
                </div>
            </div>
            <!--新的密码-->
            <!--            <div class="form-group has-success">-->
            <!--                <label class="col-sm-2 col-md-2 control-label" id="l2">密码</label>-->
            <!--                <div class="col-sm-4 col-md-4">-->
            <!--                    <input type="password" id="password" th:value="${session.loginUser.getPassword()}"-->
            <!--                           class="form-control"-->
            <!--                           name="password" placeholder="请输入您的新密码"/>-->
            <!--                </div>-->
            <!--            </div>-->
            <!--填写电话-->
            <div class="form-group has-success">
                <label class="col-sm-2 col-md-2 control-label" id="l2">电话</label>
                <div class="col-sm-4 col-md-4">
                    <input type="text" id="phone" th:value="${session.loginUser.getPhone()}" class="form-control"
                           name="phone" placeholder="请输入您的新电话"/>
                </div>
            </div>
            <!--填写真实姓名-->
            <div class="form-group has-success">
                <label class="col-sm-2 col-md-2 control-label" id="l2">真实姓名</label>
                <div class="col-sm-4 col-md-4">
                    <input type="text" id="realName" th:value="${session.loginUser.getRealName()}" class="form-control"
                           name="realName" placeholder="请输入您的真实姓名"/>
                </div>
            </div>

            <!--选择性别-->
            <div class="form-group">
                <label class="col-sm-2 col-md-2 control-label" id="l2">性别</label>
                <div class="col-sm-2 col-md-2 form-inline">
                    <input type="radio" class="form-inline" id="sex" name="sex" value="0"/>男
                </div>
                <div class="col-sm-2 col-md-2 form-inline">
                    <input type="radio" class="form-inline" id="sex" name="sex" value="1"/>女
                </div>
            </div>

            <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10">
                    <button type="button" id="update" class="btn btn-success">确认修改</button>
                    <button type="reset" class="btn btn-primary">重置</button>
                </div>
            </div>
        </form>
    </div>
</div>

</body>

<script>
    $("#update").click(function () {
        //获取表单数据 序列号表单数据
        var date = $("#myfrom").serialize();

        $.post("user/updateByEmail", date, function (data) {
            if (data.state == 200) {
                alert(data.message);
                location.href = "/";  //返回主页面
            } else {
                alert(data.message);
            }
        }, "json");
    });
</script>
</html>